<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-19 10:04:31
 * @LastEditors: charles
 * @LastEditTime: 2021-12-19 10:18:04
-->
<template>
  <div>
    <!-- 标题 -->
    <div class="title">
      <el-button @click="backHandler">返回</el-button>
      学生详情
    </div>

    <!-- 表格 -->
    <div class="table">

      <el-descriptions class="margin-top" title="学生信息表" :column="2" :size="size" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="toEdit">编辑</el-button>
        </template>
        <el-descriptions-item  v-model="Data">
          <template slot="label">
            <i class="el-icon-user"></i>
            学号
          </template>
          {{Data.date}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{Data.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{Data.telephone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            备注
          </template>
          <el-tag size="small">学生</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{Data.address}}
        </el-descriptions-item>

      </el-descriptions>
    </div>

    <!-- 抽屉 -->
    <!-- 抽屉 -->
    <el-drawer :title=this.title :visible.sync="dialog" direction="rtl" custom-class="demo-drawer"
      ref="drawer" size="50%">
      <div class="demo-drawer__content">
        <!-- {{this.form}} -->
        <el-form :model="form" ref="myForm" :rules="rules">

          <el-row>
            <el-col :span="12">
              <el-form-item prop="date" label="学号" :label-width="formLabelWidth">
                <el-input v-model="form.date" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="name" label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="telephone" label="电话号码" :label-width="formLabelWidth">
                <el-input v-model="form.telephone" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="address" label="家庭住址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="($event) => (dialog = false)">取 消</el-button>
          <el-button type="primary" @click="toAdd">提交</el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
export default {
    data() {
        return {
            visible: false,
            title: '',
            //表单验证规则
            rules: {
                date: [{ required: true, message: '请输入学生学号', trigger: 'blur' }],
                name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
                telephone: [{ required: true, message: '请输入学生电话', trigger: 'blur' }],
                address: [{ required: true, message: '请输入学生地址', trigger: 'blur' }],
            },
            form: {
                date: '',
                name: '',
                telephone: '',
                address: '',
            },
            formLabelWidth: '80px',
            dialog: false,
            size: 'medium',
            Data: {},
        }
    },
    mounted() {
        this.Data = { ...this.$route.query }
        // console.log(this.Data)
    },
    methods: {
        //提交
        toAdd() {
            this.$refs['myForm'].validate((valid) => {
                if (valid) {
                    this.Data = this.form;
                    this.dialog = false
                    this.$notify({
                        title: '成功',
                        message: '这是一条成功的提示消息',
                        type: 'success',
                    })
                    //重置表单校验
                    this.$refs['myForm'].resetFields()
                    //关闭抽屉
                    this.dialog = false
                } else {
                    // console.log("error submit!!");
                    return false
                }
            })
        },
        //编辑
        toEdit() {
            this.title = '编辑学生信息'
            this.dialog = true
            this.form = { ...this.Data }
        },
        //返回
        backHandler() {
            this.$router.go(-1)
        },
    },
}
</script>

<style>
.title {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 14px;
    border-left: 5px solid rgb(248, 128, 128);
}
</style>